<script setup>
import {reactive} from "vue";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 教师数据
 *
 * @type {UnwrapNestedRefs<{form: {teacherEmail: string, teacherAge: number, teacherName: string, teacherCollageNo: string, teacherCountNumber: string, teacherCreateMan: string, teacherRoomName: string, teacherNo: string, teacherCreateTime: string, teacherUpdateMan: string, teacherCollageName: string, teacherRoomNo: string, teacherPhone: string, teacherSex: string, teacherUpdateTime: string, teacherPositionalTitle: string}}>}
 */
const teacherData = reactive({
    form: {
        teacherNo: '',
        teacherName: '',
        teacherAge: 0,
        teacherSex: '',
        teacherPositionalTitle: '',
        teacherCollageNo: '',
        teacherCollageName: '',
        teacherRoomNo: '',
        teacherRoomName: '',
        teacherPhone: '',
        teacherEmail: '',
        teacherCreateMan: '',
        teacherCreateTime: '',
        teacherUpdateMan: '',
        teacherUpdateTime: '',
        teacherCountNumber: '',
    }
})


/**
 * 教师数据
 *
 * @type {UnwrapNestedRefs<{form: {teacherEmail: string, teacherAge: number, teacherName: string, teacherPhone: string, teacherSex: number, teacherNo: string}}>}
 */
const teacherNewData = reactive({
    form: {
        teacherNo: '',
        teacherName: '',
        teacherAge: 0,
        teacherSex: 0,
        teacherPhone: '',
        teacherEmail: '',
    }
})

/**
 * 加载个人信息
 */
const loadTeacher = () => {
    request.get(`/api/teacher/teacher-info/${account.accountNo}`).then(res => {
        if (res.code === "200") {
            if (res.data === null) {
                teacherData.form = {}
            } else {
                teacherData.form = res.data
            }
        }
    })
}
loadTeacher();

/**
 * 更新个人信息
 */
const updateInfo = () => {
    if (account.accountRoleName === 'visitor-teacher') {
        ElMessage.info("游客-教师仅可以查看信息")
    } else {
        teacherNewData.form.teacherNo = teacherData.form.teacherNo
        teacherNewData.form.teacherName = teacherData.form.teacherName
        teacherNewData.form.teacherAge = teacherData.form.teacherAge
        teacherNewData.form.teacherPhone = teacherData.form.teacherPhone
        teacherNewData.form.teacherEmail = teacherData.form.teacherEmail
        if (teacherData.form.teacherSex === "男") {
            teacherNewData.form.teacherSex = 1
        } else {
            teacherNewData.form.teacherSex = 0
        }
        request.put(`/api/teacher/update-info`, teacherNewData.form).then(res => {
            if (res.code === "200") {
                loadTeacher();
                ElMessage.success("修改成功")
            } else {
                ElMessage.error(res.msg)
            }
        })
    }
}

/**
 * 上传成功
 *
 * @param res 头像
 */
const uploadSuccess = (res) => {
    ElMessage.success("上传成功")
    account.accountPhoto = res.data
}

/**
 * 获取账号
 */
const getAccountNo = () => {
    if (account.accountRoleName === 'visitor-teacher') {
        ElMessage.info("游客-教师仅可以查看信息")
    } else {
        request.get(`/files/get-account-no/${account.accountNo}`)
    }
}
</script>

<template>
    <div>
        <div class="card" style="width: 50%; padding: 40px;">
            <el-form :model="teacherData.form" label-width="100px" label-position="center"
                     style="padding-right: 40px">
                <el-form-item label="头像">
                    <el-image style="width: 150px; height: 150px" :src="account.accountPhoto"/>
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:9090/files/upload"
                            :show-file-list="false"
                            list-type="picture"
                            :on-success="uploadSuccess">
                        <div style="margin-top: 220px; margin-left: -200px"
                             v-if="account.accountRoleName === 'common-teacher'">
                            <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                        </div>
                    </el-upload>
                    <div style="margin-top: 220px; margin-left: -150px"
                         v-if="account.accountRoleName === 'visitor-teacher'">
                        <el-button @click="getAccountNo" type="primary" size="middle" round>修改头像</el-button>
                    </div>
                </el-form-item>
                <el-form-item label="工号" prop="teacherNo">
                    <el-input style="width: 400px" v-model="teacherData.form.teacherNo" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="姓名" prop="teacherName">
                    <el-input v-model="teacherData.form.teacherName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="年龄" prop="teacherAge">
                    <el-input v-model="teacherData.form.teacherAge" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="teacherData.form.teacherSex">
                        <el-radio label="男">男</el-radio>
                        <el-radio label="女">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="teacherPhone">
                    <el-input v-model="teacherData.form.teacherPhone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="邮箱" prop="teacherEmail">
                    <el-input v-model="teacherData.form.teacherEmail" autocomplete="off"/>
                </el-form-item>
            </el-form>
            <div>
                <el-button @click="updateInfo" type="primary"
                           style="margin-bottom: 10px;margin-left: 350px">修改信息
                </el-button>
            </div>
        </div>
        <div class="card" style="margin-top: 10px;width: 50%;padding: 40px;">
            <el-form :model="teacherData.form" label-width="100px" label-position="center" style="padding-right: 40px">
                <el-form-item label="职称" prop="teacherPositionalTitle">
                    <el-input style="width: 400px" v-model="teacherData.form.teacherPositionalTitle"
                              autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="学院" prop="teacherCollageName">
                    <el-input v-model="teacherData.form.teacherCollageName" autocomplete="off" disabled/>
                </el-form-item>
                <el-form-item label="办公室" prop="teacherRoomName">
                    <el-input v-model="teacherData.form.teacherRoomName" autocomplete="off" disabled/>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<style scoped>

</style>